<script setup lang="ts" name="GoodsTransaction">
import { onMounted, ref, getCurrentInstance, watch } from 'vue'
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import { reqGoodsSaleList } from '@/apis/supply';
import type { GoodsSaleResponseData, GoodsSaleList } from '@/apis/supply/type';
import type { ComponentInternalInstance } from 'vue';
import type { socketDataObj } from '@/apis/supply/type';
import useWebSocket from '@/hooks/useWebSocketStore';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
let goodsSaleList = ref<GoodsSaleList>([]);
const { socketData } = useWebSocket();
// const props = defineProps<{ socketData: socketDataObj }>();
watch(
  () => socketData.value?.sellList,
  (n, o) => {
    // 判断推送数据是不是数组，有可能上一次推了这次没推会触发监视属性但是为undefine
    if (n instanceof Array) {
      const arr = n;
      // 从下标为0的位置，替换0个（也就是插入），一个数组n
      goodsSaleList.value.splice(0, 0, ...arr);
      goodsSaleList.value = goodsSaleList.value.slice(0, 19)
    } else {
      return;
    }
  }
)
// const props = defineProps<{ socketData: socketDataObj }>();
// watch(
//   () => props.socketData.sellList,
//   (n, o) => {
//     // 判断推送数据是不是数组，有可能上一次推了这次没推会触发监视属性但是为undefine
//     if (n instanceof Array) {
//       const arr = n;
//       // 从下标为0的位置，替换0个（也就是插入），一个数组n
//       goodsSaleList.value.splice(0, 0, ...arr);
//       goodsSaleList.value = goodsSaleList.value.slice(0, 19)
//     }else {
//       return ;
//     }
//   }
// )
onMounted(() => {
  getGoodsSaleList();
})
async function getGoodsSaleList() {
  const res: GoodsSaleResponseData = await reqGoodsSaleList();
  if (res.code === 200) {
    goodsSaleList.value = res.data;
    console.log(goodsSaleList.value, '商品实时交易数据');

  }
}
</script>

<template>
  <div class="ScrollEChartCont">
    <div class="msgTitle backgroundImg">
      <span class="msgSpanTitle" style="width: 25%;">商品名称</span>
      <span class="msgSpanTitle" style="width: 15%;">出售门店</span>
      <span class="msgSpanTitle" style="width: 10%;">数量</span>
      <span class="msgSpanTitle" style="width: 15%;">出货仓库</span>
      <span class="msgSpanTitle" style="width: 20%;">用户</span>
      <span class="msgSpanTitle" style="width: 15%;">下单时间</span>
    </div>
    <div class="msgScroll">
      <vue3-seamless-scroll :list="goodsSaleList" class="scroll" :hover="true" :step="1" :limitScrollNum="12"
        :copyNum="1" ref="msgListRefs">
        <div class="msgScrollItem backgroundImg" v-for="item in goodsSaleList" :key="item.commodityName + item.payTime">
          <span class="msgSpanItem" style="width: 25%;">{{ item.commodityName }}</span>
          <span class="msgSpanItem" style="width: 15%;">{{ item.storeName }}</span>
          <span class="msgSpanItem" style="width: 10%;">{{ item.number }}</span>
          <span class="msgSpanItem" style="width: 15%;">{{ item.warehouseName }}</span>
          <span class="msgSpanItem" style="width: 20%;">{{ item.username }}</span>
          <span class="msgSpanItem" style="width: 15%;">{{ proxy?.$parseTime(item.payTime, 'MM-DD HH:mm') }}</span>
        </div>
      </vue3-seamless-scroll>
    </div>
  </div>

</template>



<style scoped lang="scss">
.ScrollEChartCont {
  padding: 0 12px;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  height: 550px;

  .msgTitle {
    width: 100%;
    height: 40px;
    // background: RGBA(16, 41, 88, 1);
    background-image: url(../assets/imgs/Rectangle.png);
    background-size: 100% 100%;
    display: flex;
    line-height: 40px;

    // overflow: hidden;
    .msgSpanTitle {
      width: 25%;
      font-family: PingFang SC, PingFang SC;
      font-size: 16px;
      text-align: center;
      font-weight: bold;
      color: #FFFFFF;
    }
  }

  .msgScroll {
    width: 100%;
    height: 400px;
    overflow: hidden;

    .msgScrollItem {
      height: 40px;
      display: flex;
      justify-content: space-around;
      background-image: url(../assets/imgs/itemBgImg.png);
      background-size: 100% 100%;
      line-height: 45px;

      .msgSpanItem {
        white-space: nowrap;
        /* 防止文本换行 */
        overflow: hidden;
        /* 隐藏溢出的文本 */
        text-overflow: ellipsis;
        /* 使用省略号表示文本溢出 */
        text-align: center;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        // font-weight: bold;
        color: rgba(255, 255, 255, 0.9);
      }
    }
  }
}


.backgroundImg {
  /* 背景图垂直、水平均居中 */
  background-position: center center;
  /* 背景图不平铺 */
  background-repeat: no-repeat;
  /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
  // background-attachment: fixed;
  /* 让背景图基于容器大小伸缩 */
  background-size: cover;
  /* 设置背景颜色，背景图加载过程中会显示背景色 */
}
</style>